/**
 * @Creator: eyes
 * @Date: 2020/3/16
 * 用户特征-筛选表单
 */
import React, {useCallback, useContext, useState} from 'react';
import {Form, Icon as LegacyIcon} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Row, Button} from 'antd';
import {connect} from 'react-redux';

import searchParam from '~/model/searchParam';
import {StoreContext} from '../data';
import {USER_FEATURE_ACTION_TYPES} from '../utils';
import DateRangeSelector from './selectDateRange.js';
import BusinessToPathSelector from './selectBusinessToPath';
import TargetSelector from './targetSelector.js';
import OptionsSelector from './selectOptions';

import './index.styl';

const FilterForm = props => {
    const {
        form: {
            getFieldDecorator,
            setFieldsValue,
            validateFields,
            resetFields,
        },
    } = props;

    const [fold, setFold] = useState(true);

    const onFold = useCallback(() => {
        setFold(!fold);
    }, [fold]);

    const {
        state: {
            dateRange, targetType, levelType, areaSearchLoading, userListLoading, osAndNetLoading,
            selectedBusiness, businessList, selectedApplication,
            applicationList, selectedPath, pathList
        },
        dispatch, onUserFeatureSearch
    } = useContext(StoreContext);

    // redux search store
    const {dispatch: reduxDispatch} = props;

    const onRegularChange = useCallback(payload => {
        dispatch({
            type: USER_FEATURE_ACTION_TYPES.REGULAR_UPDATE,
            payload,
        });
    }, []);

    const onSubmit = useCallback(() => {
        validateFields(error => {
            if (!error) {
                // update redux store search
                const param = {
                    business: selectedBusiness,
                    businessList,
                    project: selectedApplication,
                    projectList: applicationList,
                    path: selectedPath,
                    pathList,
                    targetType,
                    levelType
                };
                reduxDispatch(searchParam.setInfo({
                    system: 'userFeature',
                    data: param
                }));
                onUserFeatureSearch();
            }
        });
    }, [onUserFeatureSearch]);

    const onReset = useCallback(() => {
        dispatch({
            type: USER_FEATURE_ACTION_TYPES.RESET,
        });

        reduxDispatch(searchParam.reset('userFeature'));
        resetFields();
    }, []);

    return (
        <div className="user-feature-filter-form">
            <Form layout="inline">
                <DateRangeSelector
                    getFieldDecorator={getFieldDecorator}
                    dateRange={dateRange}
                    onChange={onRegularChange}
                />
                <BusinessToPathSelector
                    getFieldDecorator={getFieldDecorator}
                    resetFields={resetFields}
                />
                <TargetSelector
                    getFieldDecorator={getFieldDecorator}
                    onChange={onRegularChange}
                />

                <div className="user-feature-fold" onClick={onFold}>
                    {
                        fold ? '展开更多筛选' : '收起更多筛选'
                    }
                    <LegacyIcon type={fold ? 'down' : 'up'} />
                </div>
                <div style={fold ? {display: 'none'} : {display: 'block'}}>
                    <OptionsSelector
                        getFieldDecorator={getFieldDecorator}
                    />
                </div>
                <Row type="flex" justify="end">
                    <div className="user-feature-footer">
                        <Button
                            type="primary"
                            onClick={onSubmit}
                            loading={areaSearchLoading || userListLoading || osAndNetLoading}
                        >
                            查询
                        </Button>
                        <Button type="default" onClick={onReset}>重置</Button>
                    </div>
                </Row>
            </Form>
        </div>
    );
};

export default connect(s => s)(Form.create()(FilterForm));
